<template>
  <!-- 导航栏 搜索框 -->
  <van-search
    show-action
    v-model="value"
    shape="round"
    background="#4fc08d"
    placeholder="请输入关键词"
    @click-input="GoSearch"
  >
    <template #left>
      <van-icon name="list-switch" size="18" @click="GoModify" />
    </template>
    <template #action class="rightBtn">
      <van-button plain type="primary" size="mini">登录</van-button>
    </template>
  </van-search>
  <div class="box">
    <!-- 轮播图 -->
    <van-swipe :autoplay="1500" lazy-render>
      <van-swipe-item v-for="image in Swiper_imgs" :key="image.bannerid">
        <img :src="image.img" :alt="image.alt" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="哥，还没挑好呢？这回真的没了！"
      @load="onLoad"
    >
      <van-row justify="center">
        <van-col span="12" v-for="(item, index) in loadList" :key="item.proid">
          <img :src="item.img1" alt="" />
          <p class="van-ellipsis">商品名：{{ item.proname }}</p>
          <p>价格：{{ ((item.originprice * 8) / 10).toFixed(2) }}</p>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import http from "@/utils/http.js";
const router = useRouter();
//导航栏
let value = ref("");
let active = ref(0);
// 轮播图
const Swiper_imgs = ref([]);
// 滑动列表
let loading = false;
let finished = false;
let Count = ref(0);
let flag = ref(0);
const loadList = ref([]);

onMounted(() => {
  http
    .request({
      url: "banner/list",
      method: "GET"
    })
    .then((r) => {
      Swiper_imgs.value.push(...r.data.data);
    });
});

function onLoad() {
  if (flag == 0) {
    finished = true;
  } else {
    Count.value++;
    http
      .request({
        url: "pro/list",
        method: "GET",
        params: {
          count: Count.value,
          limitNum: 10
        }
      })
      .then((res) => {
        console.log(res);
        flag.value = res.data.data.length;
        loadList.value.push(...res.data.data);
        loading = true;
        console.log("加载");
      });
  }
}
function GoSearch() {
  router.push("/search");
}
function GoModify() {
  router.push("/modify");
  console.log(active.value);
  active.value = 1;
  console.log(active.value);
}
</script>
<style lang="css" scoped>
.van-search > :deep(.van-badge__wrapper) {
  margin-right: 5px;
}
.van-search > :deep(.van-search__action) {
  display: flex;
}
img {
  width: 100%;
}
.box {
  height: calc(100vh - 105px);
  overflow: auto;
}
</style>
